<template>
  <div class="app-container">
    <el-form :inline="true" class="queryForm" ref="queryForm" v-show="showSearch">
      <FormItem v-for="(item,index) in fieldInfo" :itemInfo="item" :index="index" :key="index" itemType="query"
                @ItemValChange="ItemValChange"></FormItem>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['demo:TDemo:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['demo:TDemo:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['demo:TDemo:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="info"
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            v-hasPermi="['demo:TDemo:import']"
        >导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['demo:TDemo:export']"
        >导出</el-button>
      </el-col>
      <!--右侧查询按钮-->
      <right-toolbar :showSearch.sync="showSearch"
                     stype="V1"
                     @handleQuery="handleQuery"
                     @resetQuery="resetQuery"
                     @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" ref="tables" :height="table.tabHeight" border :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column show-overflow-tooltip type="selection" width="55" align="center"/>
      <!--遍历需要显示的字段-->
      <el-table-column show-overflow-tooltip v-for="(item,index) in listShowColumnFilter" :key="index" :label="item.columnComment"
                       :min-width="item.columnWidth"
                       :align="item.columnAlign"
                       :prop="item.columnName">
        <template slot-scope="scope">
          <span>{{ translatorFormatter(scope.row, item) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['demo:TDemo:edit']"
          >修改
          </el-button>
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['demo:TDemo:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="table.total>0"
                :total="table.total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 添加或修改测试Demo对话框 -->
    <el-dialog :title="title" :visible.sync="open" class="addendum-dialog" :fullscreen="true" @close="cancel" :close-on-click-modal="false" :destroy-on-close="true">
      <Edit v-if="open"
            :fieldInfo="fieldInfo"
            :id="updateId"
            :prefixUrl="prefixUrl"
            :formBuildKey="formBuildKey"
            @cancel="cancel"></Edit>
    </el-dialog>

    <!-- Excel导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
      <div style="width:100%;text-align: center">
        <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！
            <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; flex-direction: row; justify-content: center;">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { TableMixins } from "@/views/youshuda/mixins/TableMixins";
  export default {
    name: "TDemo",
    mixins: [TableMixins],
    data() {
      return {
        //API前缀
        prefixUrl: '/demo/TDemo',
        //表单设计Key
        formBuildKey: 'TDemo',
        //组件描述
        componentDesc: '测试Demo',
        //数据导入配置
        upload: {
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/demo/TDemo/importData",
        },
      };
    },
    methods: {},
  };
</script>
